<template>

    <transition name="slide">
      <div class="show">
        歌手详情页xxxxxxxxxxxxxxxxxxxxx
      </div>
      <!--<music-list :title="title" :bg-image="bgImage" :songs="songs"></music-list>-->
    </transition>

</template>

<script type="text/ecmascript-6">
  // import MusicList from 'components/music-list/music-list'
  // import {getSingerDetail} from 'api/singer'
  // import {ERR_OK} from 'api/config'
  // import {createSong} from 'common/js/song'
  // import {mapGetters} from 'vuex'

  export default {
    // computed: {
    //   title() {
    //     return this.singer.name
    //   },
    //   bgImage() {
    //     return this.singer.avatar
    //   },
    //   // ...mapGetters([
    //   //   'singer'
    //   // ])
    // },
    // data() {
    //   return {
    //     songs: []
    //   }
    // },
    // created() {
    //   this._getDetail()
    // },
    // methods: {
    //   _getDetail() {
    //     if (!this.singer.id) {
    //       this.$router.push('/singer')
    //       return
    //     }
    //     getSingerDetail(this.singer.id).then((res) => {
    //       if (res.code === ERR_OK) {
    //         this.songs = this._normalizeSongs(res.data.list)
    //       }
    //     })
    //   },
    //   _normalizeSongs(list) {
    //     let ret = []
    //     list.forEach((item) => {
    //       let {musicData} = item
    //       if (musicData.songid && musicData.albummid) {
    //         ret.push(createSong(musicData))
    //       }
    //     })
    //     return ret
    //   }
    // },
    // components: {
    //   MusicList
    // }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .show
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    background green
    z-index:100
    /*  切换的转场动画 */
  .slide-enter-active, .slide-leave-active
    transition: all 0.3s

  .slide-enter, .slide-leave-to
    /*  平移效果，平移旋转缩放扭曲 */
    transform: translate3d(100%, 0, 0)
</style>
